<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .outer {
        background-color: lightblue;
        height: 100px;
        width: 100px;
        padding: 20px;   
    }

    .middle {
        background-color: red;
        padding: 20px;
        height: 60px;
    }

    .inner {
        background-color: blue;
        height: 40px;
    }
</style>
<body>
    

    <div class="outer">
        <div class="middle">
            <div class="inner">
            </div>
        </div>
    </div>

    <script>
       const outer = document.querySelector('.outer')
       const middle = document.querySelector('.middle')
       const inner = document.querySelector('.inner')
        outer.addEventListener('click', function(){
            alert('Outer Clicked')
        }, true)

        middle.addEventListener('click', function(){
            alert('Middle Clicked')
        })

        inner.addEventListener('click', function(){
            alert('Inner Clicked')
        })
    </script>
</body>
</html>
